<template>
  <el-main class="vertical">
    <el-container style="height:55%;">
      <basic-crud ref="topCrudRrf" :option="option" businessUrl="/mes/workRequestController" class="curdTop"
                  selectType="multiple"
                  @current-row-change="handleCurrentRowChange" @selection-change="selectionChangeHandler">
        <template #menu="{row}">
          <el-button icon="TopRight" type="text" plain @click="reAlertUndo(row)">重发待办</el-button>
          <el-button icon="Tickets" type="text" plain @click="obsoletedPlan(row)">作废计划</el-button>
        </template>
      </basic-crud>
    </el-container>

    <el-container style="height:45%">
      <basic-crud ref="bottomCrudRef" :apiListParams="listPatrams" :autoLoad="false" :option="bottomOption"
                  businessUrl="/mes/workRequestItemController"
                  class="curdBottom">
      </basic-crud>
    </el-container>
  </el-main>
</template>

<script setup>
import {computed} from "vue";
import {doObsoletedPlan, reAlertUndoById} from "../../../apis/mes/workRequest";
import { formatDate } from "@/utils/formatTime";

const bottomHeight = ref((document.body.clientHeight - 120) * 0.45 - 75);//0.45是父容器的高度设为45%
const option = ref({
  highlightCurrentRow: true,
  size: 'small',
  calcHeight: bottomHeight.value + 95,
  menuWidth: 280,
  viewBtn: false,
  column: [
    {
      label: "计划编号",
      prop: "code",
      fixed: true,
      sortable: true,
      width: 220,
      overHidden: true,
      searchSpan: 8,
      search: true,
      align: "center",
    },
    {
      label: "计划名称",
      prop: "planAuditOrderName",
      sortable: true,
      searchSpan: 8,
      overHidden: true,
      search: true,
      minWidth:180
    },
    {
      label: "是否分解",
      prop: "status",
      width: 80,
      search: true,
      searchType: "select",
      display: false,
      searchSpan: 8,
      align: "center",
      selection: true,
      statusShow: true,
      statusTag: true,
      statusTypeMap: {
        Released:'success',
        Editing: 'info',
        Obsoleted: 'danger',
      },
    },
    {
      label: "项目名称",
      prop: "name",
      fixed: true,
      sortable: true,
      searchSpan: 8,
      overHidden: true,
      search: true,
      minWidth:180
    },
    {
      label: "来源名称",
      prop: "planSourceName",
      searchSpan: 8,
      search: true,
      overHidden: true,
      minWidth:180
    },
    {
      label: "来源编号",
      prop: "planSourceCode",
      overHidden: true,
      minWidth:180
    },
    {
      label: "年度",
      prop: "yearNum",
      width: 80,
      search: true,
      type: "year",
      align: 'center',
      searchSpan: 8,
      valueFormat: 'YYYY'
    },
    {
      label: "紧急程度",
      prop: "exigencyLevel",
      width: 80,
      type: "select",
      align: 'center',
      dicData: [
        {
          label: "不紧急",
          value: "none",
        },
        {
          label: "一般",
          value: "normal",
        },
        {
          label: "紧急",
          value: "exigency",
        },
        {
          label: "非常紧急",
          value: "veryExigency",
        },
      ],
    },
    {
      label: "军检",
      prop: "armyCheck",
      width: 60,
      type: "switch",
      dicData: [{
        label: '否',
        value: 'false'
      }, {
        label: '是',
        value: 'true'
      }],
      value: 'false'
    },
  ]
});

const bottomOption = ref({
  highlightCurrentRow: true,
  height: bottomHeight.value,
  size: 'small',
  viewBtn: false,
  menuWidth: 150,
  column: [
    {
      label: "责任部门",
      prop: 'zeRenDeptName',
      overHidden: true,
      width: 140
    }, {
      label: "是否分解",
      prop: "status",
      width: 80,
      search: false,
      searchType: "select",
      display: false,
      searchSpan: 8,
      align: "center",
      statusShow: true,
      statusTag: true,
      statusTypeMap: {
        Editing: 'info',
        Obsoleted: 'danger',
      },
    }, {
      label: '项目号',
      prop: 'code',
      width: 130,
      overHidden: true,
      sortable: true,
    }, {
      label: '产品名称',
      prop: 'productName',
      sortable: true,
      overHidden: true,
      minWidth: 180,
    }, {
      label: '产品型号',
      prop: 'modelName',
      sortable: true,
      minWidth: 150,
      overHidden: true
    }, {
      label: '数量',
      prop: 'quantity',
      type: 'number',
      width: 60,
    }, {
      label: '已分解/未分解数量',
      prop: 'planQuantity',
      type: 'number',
      width: 130,
      formatter: (val) => {
        if (val.planQuantity == null) {
          val.planQuantity = 0;
        }
        return val.planQuantity + "/" + (val.quantity - val.planQuantity);
      }
    }, {
      label: '甲方投产函号',
      prop: 'produceCode',
      overHidden: true,
      width: 130,
    }, {
      label: '计划开工日期',
      prop: 'planBeginDate',
      format: 'yyyy-MM-dd',
      sortable: true,
      width: 120,
      type: 'date',
      formatter: (row) => {
        return formatDate(row.planBeginDate, "yyyy-MM-dd");
      },
    }, {
      label: '计划完工日期',
      prop: 'planFinishDate',
      format: 'yyyy-MM-dd',
      sortable: true,
      width: 120,
      type: 'date',
      formatter: (row) => {
        return formatDate(row.planFinishDate, "yyyy-MM-dd");
      },
    }, {
      label: '计划交付日期',
      prop: 'planDeliveryDate',
      format: 'yyyy-MM-dd',
      sortable: true,
      width: 120,
      type: 'date',
      formatter: (row) => {
        return formatDate(row.planDeliveryDate, "yyyy-MM-dd");
      },
    }, {
      label: '批次号',
      prop: 'batchNum',
      overHidden: true,
      width: 120
    }, {
      label: '配套机型',
      prop: 'targetModel',
      overHidden: true,
      width: 150
    }
  ]
});

// 上方当前行数据
const currentRow = ref({});
// 下方表格参数
const listPatrams = computed(() => {
  return {
    workRequestId: currentRow?.value?.id || null
  }
});
const handleCurrentRowChange = (row) => {
  currentRow.value = row
};

const topCrudRrf = ref(null);
const bottomCrudRef = ref(null);
const refresh = () => {
  topCrudRrf.value?.getList();
  bottomCrudRef.value.getList();
};

const reAlertUndo = (row) => {
  ElMessageBox.confirm(
      '是否重新发送待办提醒, 需您确认',
      {title: '操作确认', type: 'warning'}
  ).then(() => {
    reAlertUndoById({ids: [row.id]}).then((res) => {
      ElMessage.success("发送成功");
    }).catch((e) => ElMessage.error("重新发送待办提醒的时候出错了" + e));
    refresh();
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消操作',
    })
  });
};

const obsoletedPlan = (row) => {
  if ('Editing' != row.status && 'partUsed' != row.status) {
    ElMessage.error('当前状态不能作废计划');
    return false;
  }
  ElMessageBox.confirm(
      '是否作废这个计划, 需您确认',
      {title: '操作确认', type: 'warning'}
  ).then(() => {
    doObsoletedPlan(row).then(() => {
      ElMessage.success("作废成功");
    }).catch((e) => ElMessage.error("作废的时候出错了" + e));
    refresh();
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消操作',
    })
  });
};

</script>

<style lang="scss" scoped>

</style>
